<template>
  <div class="getReport public">
    <div class="getReport-result">
      <div class="getReport-result-header">
        <div class="getReport-result-header-title">{{ userName }}的面相报告</div>
        <div class="getReport-result-header-img">
          <img :src="mySelfImg" alt="" />
        </div>
      </div>
      <div class="getReport-result-desc titleContent">
        <div class="titleContent-tle">面相概论</div>
        <div class="titleContent-content">{{ Desc.overview }}</div>
        <div class="desc-btn">
          <img class="desc-btn-img" src="@/assets/img/lock_icon.png" alt="" />
          <div class="desc-btn-txt" @click="clockFaceDesc">解锁面相报告</div>
        </div>
        <div class="getReport-result-desc-tips">加老师可领取专属于您个人的一对一运势报告，并附赠不限次数的问题解读</div>
      </div>
      <div class="getReport-result-score">
        <div class="getReport-result-score-title">
          <img class="getReport-result-score-title-img" src="@/assets/img/icon_face.png" alt="" />
          五官评分
        </div>
        <div class="getReport-result-score-faceContent">
          <div class="getReport-result-score-faceContent-left">
            <img src="@/assets/img/score1.png" alt="" />
          </div>
          <div class="getReport-result-score-faceContent-right">
            <div class="getReport-result-score-faceContent-right-item" v-for="(item, index) in faceContent" :key="index">
              <div class="getReport-result-score-faceContent-right-item-name">{{ item.name }}</div>
              <el-progress
                class="getReport-result-score-faceContent-right-item-progress"
                :stroke-width="10"
                :show-text="false"
                :percentage="item.score"
              ></el-progress>
              <div class="getReport-result-score-faceContent-right-item-score">{{ item.score / 10 }}分</div>
            </div>
            <img class="getReport-result-score-faceContent-right-lock" src="@/assets/img/score2.png" alt="" />
          </div>
        </div>
        <div class="desc-btn">
          <img class="desc-btn-img" src="@/assets/img/lock_icon.png" alt="" />
          <div class="desc-btn-txt" @click="clockFaceDesc">解锁面相报告</div>
        </div>
      </div>
      <div class="getReport-result-scoreDesc">
        <div class="getReport-result-scoreDesc-item" v-for="(item, index) in scoreDescItem" :key="index">
          <div class="getReport-result-scoreDesc-item-title">
            <div class="getReport-result-scoreDesc-item-title-l">{{ item.name }}</div>
            <div class="getReport-result-scoreDesc-item-title-r">{{ item.desc }}</div>
          </div>
          <div class="getReport-result-scoreDesc-item-desc">{{ item.content }}</div>
        </div>
        <div class="desc-btn">
          <img class="desc-btn-img" src="@/assets/img/lock_icon.png" alt="" />
          <div class="desc-btn-txt" @click="clockFaceDesc">解锁面相报告</div>
        </div>
      </div>
      <div class="getReport-result-fiveface titleContent">
        <div class="titleContent-tle">五行面相</div>
        <div class="titleContent-content">{{ Desc.fiveElementFacialFeatures }}</div>
        <div class="getReport-result-fiveface-title2">五行格局</div>
        <div class="getReport-result-fiveface-desc">{{ Desc.fiveElemenPattern.substring(0, 17) }}......</div>
        <div class="desc-btn">
          <img class="desc-btn-img" src="@/assets/img/lock_icon.png" alt="" />
          <div class="desc-btn-txt" @click="clockFaceDesc">解锁面相报告</div>
        </div>
      </div>
      <div class="getReport-result-money" @click="clockFaceDesc">
        <img src="@/assets/img/caiyun.png" alt="" />
      </div>
    </div>
    <van-popup closeable v-model="isShowBirth" position="bottom" round>
      <div class="payPopup">
        <div class="payPopup-title">请选择支付方式</div>
        <div class="payPopup-content">
          <div class="payPopup-content-text">
            <div class="payPopup-content-text-top">独一无二的面相，揭开你的面相秘密。发现属于你的个人魅力，探索面相背后秘密</div>
            <div class="payPopup-content-text-bot">
              <div class="payPopup-content-text-bot-l">优惠价</div>
              <div class="payPopup-content-text-bot-c"><span>¥</span>58</div>
              <div class="payPopup-content-text-bot-r">原价¥288</div>
            </div>
          </div>
          <div class="payPopup-content-img">
            <img src="@/assets/img/pay_head_bg.png" alt="" />
          </div>
        </div>
        <div class="payPopup-select">
          <div class="payPopup-select-pay" @click="selectPay('wechat')">
            <div class="payPopup-select-pay-l">
              <div class="payPopup-select-pay-l-img">
                <img src="@/assets/img/pay_wechat.png" alt="" />
              </div>
              <div class="payPopup-select-pay-l-name">微信支付</div>
            </div>
            <div class="payPopup-select-pay-r">
              <img :src="weChatSelectImg" alt="" />
            </div>
          </div>
          <div class="payPopup-select-pay" @click="selectPay('alipay')">
            <div class="payPopup-select-pay-l">
              <div class="payPopup-select-pay-l-img">
                <img src="@/assets/img/pay_alipay.png" alt="" />
              </div>
              <div class="payPopup-select-pay-l-name">支付宝支付</div>
            </div>
            <div class="payPopup-select-pay-r">
              <img :src="aliPaySelectImg" alt="" />
            </div>
          </div>
        </div>
        <div class="payPopup-btn" @click="gotopay">立即支付</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { facialAnalysisanalysis } from '@/api/api.js';

export default {
  data() {
    return {
      mySelfImg: require('@/assets/img/photograph_pic.png'),
      Desc: {
        eye: '眼睛(4字以内)',
        eyeDescription: '眼睛描述',
        eyeRating: '眼评分',
        eyebrow: '眉毛(4字以内)',
        eyebrowDescription: '眉毛描述',
        eyebrowRating: '眉评分',
        faceRating: '脸评分',
        facialCareerFortuneReport: '面相事业运程报告',
        facialEmotionReport: '面相情感运势报告',
        facialEvaluation: '五官评分',
        facialSummary: '面相总结(4字以内)',
        feature: '脸型(4字以内)',
        featureDescription: '脸型描述',
        fiveElemenPattern: '五行格局',
        fiveElementFacialFeatures: '五行面相',
        mouth: '嘴巴(4字以内)',
        mouthDescription: '嘴巴描述',
        nose: '鼻子(4字以内)',
        noseDescription: '鼻子描述',
        noseRating: '鼻评分',
        overview: '面相概述',
        sanTingRating: '三庭评分'
      },
      userName: '',
      faceDesc: '拥有新月眉的男性比较细心、绅士，人缘也是相当不错',
      fiveface: '阿萨的木型面相',
      fivefacedesc: '木型脸。脸瘦直修长，骨节坚硬，目秀须清，纯宏细纹，腰细而圆。走起路来，上身摆动且步伐安稳踏',
      scoreDescItem: [
        { name: '脸型', desc: '', content: '' },
        { name: '眉毛', desc: '', content: '' }
        // { name: '眼睛', desc: '', content: '' },
        // { name: '嘴巴', desc: '眼距较宽', content: '眼距较长是个性格比较懦' },
        // { name: '鼻子', desc: '眼距较宽', content: '眼距较长是个性格比较懦' }
      ],
      faceContent: [
        { name: '上庭', score: 50 },
        { name: '中庭', score: 50 },
        { name: '下庭', score: 50 },
        { name: '眉毛', score: 50 },
        { name: '眼睛', score: 50 },
        { name: '鼻子', score: 50 },
        { name: '嘴巴', score: 50 }
      ],
      isShowBirth: false,
      weChatSelectImg: require('@/assets/img/pay_select.png'),
      aliPaySelectImg: require('@/assets/img/pay_unselected.png'),
      payWay: 'wechat'
    };
  },
  mounted() {
    this.mySelfImg = localStorage.getItem('imgUrl');
    this.userName = localStorage.getItem('myName');
    this.getData();
  },
  methods: {
    getData() {
      this.Desc = JSON.parse(localStorage.getItem('faceDesc'));
      // 评分
      // 上中下挺
      this.faceContent[0].score = Number(this.Desc.sanTingRating) * 10;
      this.faceContent[1].score = Number(this.Desc.sanTingRating) * 10;
      this.faceContent[2].score = Number(this.Desc.sanTingRating) * 10;

      // 脸型
      this.scoreDescItem[0].desc = this.Desc.feature;
      this.scoreDescItem[0].content = this.Desc.featureDescription;
      // 眉毛
      this.scoreDescItem[1].desc = this.Desc.eyebrow;
      this.scoreDescItem[1].content = this.Desc.eyebrowDescription;
      this.faceContent[3].score = Number(this.Desc.eyebrowRating) * 10;
      // 眼睛
      this.scoreDescItem[2].desc = this.Desc.eye;
      this.scoreDescItem[2].content = this.Desc.eyeDescription;
      this.faceContent[4].score = Number(this.Desc.eyeRating) * 10;
      // 嘴巴
      this.scoreDescItem[3].desc = this.Desc.mouth;
      this.scoreDescItem[3].content = this.Desc.mouthDescription;
      this.faceContent[4].score = Number(this.Desc.faceRating) * 10;
      // 鼻子
      this.scoreDescItem[4].desc = this.Desc.nose;
      this.scoreDescItem[4].content = this.Desc.noseDescription;
      this.faceContent[5].score = Number(this.Desc.noseRating) * 10;
    },
    clockFaceDesc() {
      this.isShowBirth = true;
    },
    selectPay(e) {
      if (e == 'wechat') {
        this.payWay = e;
        this.weChatSelectImg = require('@/assets/img/pay_select.png');
        this.aliPaySelectImg = require('@/assets/img/pay_unselected.png');
      } else {
        this.payWay = e;
        this.weChatSelectImg = require('@/assets/img/pay_unselected.png');
        this.aliPaySelectImg = require('@/assets/img/pay_select.png');
      }
    },
    gotopay() {
      this.$router.push('/paySuccess');
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-progress-bar__inner {
  background-color: #1ffbbb !important;
}
::v-deep .el-progress-bar__outer {
  background-color: #979797 !important;
}
::v-deep .van-popup--bottom {
  width: 9.16rem !important;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // flex-direction: column;
  height: 10.546667rem;
  background: #1b1b2c;
  padding: 0.546667rem 0.306667rem 0.6rem 0.546667rem;
  text-align: center;
}
.desc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.493333rem;
  height: 1.28rem;
  margin: 0 auto;
  margin-top: 0.5rem;
  line-height: 1.28rem;
  background: #1ffbbb;
  border-radius: 0.693333rem;
  cursor: pointer;
  font-family: SourceHanSansSC-Medium, SourceHanSansSC;
  position: relative;
  &-img {
    width: 0.333333rem;
    height: 0.44rem;
    margin-right: 0.173333rem;
    position: absolute;
    left: 2.2rem;
  }
  &-txt {
    color: #333;
    font-weight: 600;
    font-size: 0.48rem;
    position: absolute;
    left: 0.5rem;
    width: 100%;
    text-align: center;
  }
}
.titleContent {
  position: relative;
  width: 9.36rem;
  background: #272736;
  border-radius: 0.213333rem;
  margin: 0 0 0.453333rem;
  text-align: center;
  &-tle {
    width: 4.986667rem;
    height: 0.386667rem;
    line-height: 0.333333rem;
    font-size: 0.48rem;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: 700;
    color: #fff;
    margin: 0.573333rem auto 0;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url('@/assets/img/pay_title_bg.png');
  }
  &-content {
    opacity: 0.8;
    max-height: 5.04rem;
    padding: 0 0.36rem;
    overflow: hidden;
    font-size: 0.4rem;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #fff;
    line-height: 0.72rem;
    margin-top: 0.333333rem;
  }
}

.getReport {
  background-image: url('@/assets/img/write_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  &-result {
    display: flex;
    align-items: center;
    flex-direction: column;
    &-header {
      &-title {
        display: flex;
        align-items: center;
        font-size: 0.586667rem;
        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
        font-weight: 700;
        color: #fff;
        line-height: 0.853333rem;
        margin: 0.6rem 0 0.693333rem;
        padding: 0 0.666667rem;
        text-align: center;
      }
      &-img {
        width: 5rem;
        height: 5rem;
        overflow: hidden;
        border-radius: 50%;
        margin: auto;
        margin-bottom: 0.5rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    &-desc {
      &-tips {
        margin: 0.3rem auto;
        font-size: 0.4rem;
        color: #fff;
        width: 95%;
        font-weight: 700;
      }
    }
    &-score {
      position: relative;
      width: 9.36rem;
      background: #272736;
      border-radius: 0.213333rem;
      margin-bottom: 0.453333rem;
      padding-bottom: 0.6rem;
      &-title {
        display: flex;
        align-items: center;
        margin: 0.466667rem 0 0.453333rem 0.333333rem;
        font-size: 0.48rem;
        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
        font-weight: 700;
        color: #fff;
        line-height: 0.693333rem;
        &-img {
          width: 0.72rem;
          margin-right: 0.16rem;
        }
      }
      &-faceContent {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 9.36rem;
        margin-bottom: 0.4rem;
        &-left {
          width: 3.3rem;
          height: 4.76rem;
          background: linear-gradient(180deg, rgba(96, 96, 114, 0.08), rgba(54, 54, 73, 0.08));
          border-radius: 0.16rem;
          -webkit-backdrop-filter: blur(0.533333rem);
          backdrop-filter: blur(0.533333rem);
          margin-right: 0.5rem;
          img {
            width: 100%;
            border-radius: 0.16rem;
          }
        }
        &-right {
          height: 4.76rem;
          &-lock {
            position: absolute;
            bottom: 0.1rem;
            right: 0.1rem;
            width: 5.3rem;
            height: 3.3rem;
            border-radius: 0.12rem;
          }
          &-item {
            display: flex;
            align-items: center;
            margin: 0.146667rem 0;
            &-name {
              font-size: 0.346667rem;
              font-family: SourceHanSansSC-Regular, SourceHanSansSC;
              font-weight: 400;
              color: #c5c9d1;
              line-height: 0.493333rem;
              margin-right: 0.32rem;
            }
            &-progress {
              width: 3.466667rem;
              display: flex;
              align-items: center;
              overflow: hidden;
              border-radius: 0.16rem;
            }
            &-score {
              font-size: 0.306667rem;
              font-family: SourceHanSansSC-Regular, SourceHanSansSC;
              font-weight: 400;
              color: #c5c9d1;
              line-height: 0.493333rem;
              margin-left: 0.22rem;
            }
          }
        }
      }
    }
    &-scoreDesc {
      position: relative;
      width: 9.36rem;
      background: #272736;
      border-radius: 0.213333rem;
      margin-bottom: 0.453333rem;
      padding-bottom: 0.6rem;
      padding-top: 0.3rem;
      &-item {
        padding: 0.4rem 0.5rem;
        &-title {
          font-size: 0.48rem;
          font-family: SourceHanSansSC-Bold, SourceHanSansSC;
          font-weight: 700;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #fff;

          &-r {
            width: 2.346667rem;
            height: 0.76rem;
            border-radius: 0.386667rem;
            border: 0.013333rem solid #1ffbbb;
            font-size: 0.373333rem;
            font-family: SourceHanSansSC-Bold, SourceHanSansSC;
            font-weight: 700;
            color: #1ffbbb;
            line-height: 0.76rem;
            text-align: center;
          }
        }
        &-desc {
          font-size: 0.4rem;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: #fff;
          margin-top: 0.333333rem;
          opacity: 0.7;
        }
      }
    }
    &-fiveface {
      padding-bottom: 0.6rem;
      &-title2 {
        font-size: 0.426667rem;
        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
        font-weight: 700;
        color: #fff;
        line-height: 0.613333rem;
        margin-top: 0.653333rem;
        text-align: left;
        padding: 0 0.453333rem;
      }
      &-desc {
        text-align: left;
        font-size: 0.4rem;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: #fff;
        line-height: 0.72rem;
        overflow: hidden;
        margin-top: 0.16rem;
        padding: 0 0.453333rem;
        opacity: 0.7;
      }
    }
    &-money {
      position: relative;
      width: 9.36rem;
      background: #272736;
      border-radius: 0.213333rem;
      margin: 0 0 0.453333rem;
      text-align: center;
      img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        pointer-events: none;
      }
    }
  }
}

.payPopup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  // width: 10rem;
  height: 10.546667rem;
  // margin-left: 50%;
  // transform: translateX(-50%);
  background: #1b1b2c;
  // padding: 0.546667rem 0.306667rem 0.6rem 0.546667rem;
  border-radius: 0.48rem 0.48rem 0 0;
  text-align: center;
  &-title {
    font-size: 0.48rem;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: 700;
    color: #fff;
    line-height: 0.693333rem;
  }
  &-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7 px;
    &-text {
      text-align: left;
      &-top {
        width: 5.253333rem;
        height: 2rem;
        font-size: 0.4rem;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: #fff;
        line-height: 0.666667rem;
        margin-bottom: 0.173333rem;
      }
      &-bot {
        display: flex;
        align-items: center;
        &-l {
          width: 1.12rem;
          height: 0.533333rem;
          background: #f8ea0b;
          border-radius: 0.093333rem;
          font-size: 0.293333rem;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: #1b1b2c;
          line-height: 0.533333rem;
          text-align: center;
          margin-right: 0.226667rem;
        }
        &-c {
          font-size: 0.8rem;
          font-family: LucidaGrande;
          color: #f8ea0b;
          line-height: 0.573333rem;
          margin-right: 0.28rem;
          span {
            font-size: 0.48rem;
          }
        }
        &-r {
          font-size: 0.32rem;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: #c5c9d1;
          text-decoration: line-through;
        }
      }
    }
    &-img {
      width: 3.72rem;
      height: 4.72rem;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  &-select {
    width: 100%;
    color: #fff;
    &-pay {
      cursor: pointer;
      margin-top: 0.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-l {
        display: flex;
        align-items: center;
        justify-content: center;
        &-img {
          width: 0.88rem;
          height: 0.88rem;
          margin-right: 0.24rem;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        &-name {
          font-size: 0.373333rem;
        }
      }
      &-r {
        width: 0.48rem;
        height: 0.48rem;
        cursor: pointer;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  &-btn {
    background: #1ffbbb;
    color: #151522;
    border-radius: 0.64rem;
    font-size: 0.453333rem;
    font-weight: 700;
    line-height: 1.226667rem;
    text-align: center;
    width: 100%;
    height: 1.226667rem;
    margin-top: 0.626667rem;
    cursor: pointer;
  }
}
</style>